﻿<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Car Pool based on Google Maps API</title>
<link href="/style/gastics.css" rel="stylesheet" type="text/css" />
<script src="http://ditu.google.com/maps?file=api&v=2&key=ABQIAAAA8yokUi5xoBG-TMsdDqFULRRT0FwO0dFFC-Wq6TOngCemadNdfhRFD5d1fFX4BIq0mWLeKZKoY9VjOg" type="text/javascript"></script>

<script type="text/javascript">
    //<![CDATA[
    var points = [];
    
    var infoTabs = [	new GInfoWindowTab("起点", "不错的起点"),
					  new GInfoWindowTab("说明", "起点只有一个")
					];

    
	function load()
	{
		function GClearPointControl() { 
	    	var me = this; 
		} 

		GClearPointControl.prototype = new GControl(); 

		GClearPointControl.prototype.initialize = function(map) { 
		    var container=document.createElement("div");
		    var normal=document.createElement("div");
		    this.setButtonStyle_(normal);
		    container.appendChild(normal);
		    normal.appendChild(document.createTextNode("clear"));
		    GEvent.addDomListener(normal,"click",function(){ //when user click clear button, clean the array.
			    points.length=0;
			    document.getElementById("points").value = "";
			    map.clearOverlays();
	    	});
			normal.style.cursor="pointer";
			map.getContainer().appendChild(container);
			return container;
		}

		GClearPointControl.prototype.getDefaultPosition = function() {  return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(270,7));}

		GClearPointControl.prototype.setButtonStyle_ = function(button) {  
				//button.style.textDecoration = "underline";  
				button.style.color = "#ffffff";  
				button.style.backgroundColor = "blue";  
				button.style.font = "small Arial";  
				button.style.border = "1px solid black";  
				//button.style.padding = "2px";  
				//button.style.marginBottom = "2px";  
				button.style.textAlign = "center";  
				button.style.width = "5em";
				button.style.height = "0.5em";  
				button.style.cursor = "pointer";
		}

		var map = new GMap2(document.getElementById("map"));
		
		//click on the map, add one more point
		GEvent.addListener(map, "click", function(marker, point) {
			
			var ps = "";
			points.push(new GLatLng(point.lat(),point.lng()));
                  
			for (var i = 0; i < points.length; i++) {
				ps+=points[i].lat() + "," + points[i].lng() + "|";
			}
			document.getElementById("points").value = ps;
                  
			map.addOverlay(new GPolyline(points));
			
			if (points.length == 1)
			{
				var icon = new GIcon();
				icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
				icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
				icon.iconSize = new GSize(12, 20);
				icon.shadowSize = new GSize(22, 20);
				icon.iconAnchor = new GPoint(6, 20);
				icon.infoWindowAnchor = new GPoint(5, 1);
				
				var startMark = new GMarker(new GLatLng(point.lat(),point.lng()), icon);
				GEvent.addListener(startMark , "click", function() {
						  startMark.openInfoWindowTabsHtml(infoTabs);
						});

				map.addOverlay(startMark);

				startMark.openInfoWindowTabsHtml(infoTabs);

			}
		});

		map.addControl(new GLargeMapControl());
		map.addControl(new GMapTypeControl());
		map.addControl(new GClearPointControl());
		map.setCenter(new GLatLng(31.175870747611565, 121.48724555969238),16); 
		
		//draw the existing lines
		var linecollection = "{{ url }}";
		
		if (linecollection.length > 0)
		{
			var polyline = linecollection.split("|");
			if (polyline.length > 1)
			{
				for (var i = 0; i < polyline.length - 1; i++) {
					var point = polyline[i].split(",")
					points.push(new GLatLng(point[0],point[1]));
				}
			}
			map.addOverlay(new GPolyline(points));
		}   
	}
    //]]>
	</script>
	<SCRIPT language="JavaScript">
		function OnSubmitForm()
		{
		  if(document.pressed == 'Save your route')
		  {
		  		document.getElementById("actiontype").value = 'Save your route';
		   		document.myform.action ="/route";
		  }
		  else
		  {
		  		document.myform.action ="/route";
		  }
		  return true;
		}
	</SCRIPT>

</head>

<body onload="load()" onunload="GUnload()">
<form method="POST" name="mapForm" onSubmit="return OnSubmitForm();">
<table style="margin:0 auto;width:100%">
<tr><td>
{{ header }}

</td></tr>
<tr><td height="20px"></td></tr>
<tr><td>
<div id="Body">
				<div id="sidebar">
						<table class="ae-table">
						<thead><tr><th>操作</th>
						</tr></thead>
						<tbody><tr><td><input type="submit" name="savesubmit" onClick="document.pressed=this.value" value="Save your route"/>
						<input id="actiontype" type="hidden" name="actiontype" value="Save"/>
					<input id="points" type="hidden" name="points"/></td></tr>
					<tr><td>
					<p>1. 点击右边地图，画出路径</p>

					<p>2. 按上面的按钮保存路径</p>
					<p>3. 按地图上的Clear清除所有路径</p>
					</td></tr>
						</tbody>
						<tfoot></tfoot>
						</table>
				</div>
							
				<div id="mapdiv">
					<table class="ae-table">
						<thead><tr><th>行车路线</th>
						</tr></thead>
						<tbody><tr><td>
						<div id="map" style="width: 640px; height: 380px"/>
						
					
						</td></tr>
						</tbody>
						<tfoot></tfoot>
						</table>
				</div>
</div>				
</td></tr>
<tr><td>
	{{ footer }}
	</td></tr>
	</table>
</form>
</body>
</html>